<template>
    <view class="page">
        <view class="add-list">
            <view class="list">
                <view class="title">
                    <text>发票抬头</text>
                    <text class="star">*</text>
                </view>
                <view class="content">
                    <input type="text" placeholder="请填写发票抬头">
                </view>
            </view>
            <view class="list">
                <view class="title">
                    <text>企业税号</text>
                </view>
                <view class="content">
                    <input type="text" placeholder="请填企业纳税识别号">
                </view>
            </view>
        </view>
        <!-- 保存按钮 -->
        <view class="save-btn">
            <view class="btn" @click="onSave">保存</view>
        </view>
        <DialogBox ref="DialogBox"></DialogBox>
    </view>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    methods: {
        /**
         * 保存点击
         */
        onSave() {
            this.$refs['DialogBox'].confirm({
                title: '请确认您填写的纳税识别号',
                content: '91440300MA5FQYCP55',
                DialogType: 'inquiry',
                animation: 0,
            }).then(res => {
                uni.showToast({
                    title: '保存成功',
                    icon: 'success',
                }).then(() => {
                    uni.navigateBack();
                })
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
}

.add-list {
    padding: 0 4%;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-top: 20rpx;
    .list {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100rpx;
        border-bottom: 2rpx solid #f6f6f6;
        .title {
            display: flex;
            align-items: center;
            width: 20%;
            height: 100%;
            text {
                font-size: 26rpx;
                color: #222222;
            }
            .star {
                color: red;
            }
        }
        .content {
            display: flex;
            align-items: center;
            width: 80%;
            height: 100%;
            input {
                width: 100%;
                height: 100%;
                color: #222222;
                font-size: 26rpx;
            }
        }
    }
}

/* 保存按钮 */
.save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100rpx;
    margin: 20rpx auto;
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        height: 70rpx;
        background: linear-gradient(to right, $base, $change-clor);
        box-shadow: 0 10rpx 10rpx $base;
        border-radius: 70rpx;
        font-size: 28rpx;
        color: #ffffff;
    }
}
</style>
